<template>
	<view>
		<view class="header">
			<view class="tips">
				<text class="layout">今日限行：不限</text>
				<u-icon name="bell" size="50" class="layout"></u-icon>
			</view>
			<u-grid :col="4" :border=false>
				<u-grid-item bg-color="#0081ff" @click="gotoUsage">
					<u-icon name="hourglass" :size="46"></u-icon>
					<view class="grid-text">使用记录</view>
				</u-grid-item>
				<u-grid-item bg-color="#0081ff" @click="gotoBooking">
					<image src="../../static/image/index/tingche.png" mode=""></image>
					<view class="grid-text">预约记录</view>
				</u-grid-item>
				<u-grid-item bg-color="#0081ff" @click="gotoOverdue">
					<image src="../../static/image/index/tingchejiaofei.png" mode=""></image>
					<view class="grid-text">违约记录</view>
				</u-grid-item>

				<u-grid-item bg-color="#0081ff" @click="gotoDiscounts">
					<image src="../../static/image/index/discounts.png" mode=""></image>
					<view class="grid-text">优惠卷</view>
				</u-grid-item>

			</u-grid>
		</view>
		<view class="news">
			<view class="title">
				<view class="type">资讯</view>
				<view>停简单欢迎您的使用</view>
			</view>
			<view class="time">
				05/01/ 12:00
			</view>
		</view>
		<view class="location">
			安徽师范大学停车场
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 180px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					min-scale=3 show-location>
				</map>
			</view>
		</view>
		<view class="info">
			<view class="left">
				<image src="../../static/image/index/location2.png" mode=""></image>

				<view class="position">
					安徽师范大学西南停车场
				</view>
			</view>
			<view class="right">
				<image src="../../static/image/index/location3.png" mode=""></image>
			</view>
		</view>
		<view class="integrate" @click="gotoIntegrate">
			<view class="title">
				积分商城
			</view>
			<view class="img">
				<image src="../../static/image/integrate.jpeg" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 31.340,
				longitude: 118.381,
				covers: [{
					latitude: 31.340,
					longitude: 118.381,
					iconPath: '../../static/image/index/location.png',
					width: 30,
					height: 30
				}]
			}
		},
		methods: {
			gotoUsage() {
				this.$u.route('pages/history/usageHistory')
			},
			gotoDiscounts() {
				this.$u.route('pages/public/discounts')
			},
			gotoOverdue() {
				this.$u.route('pages/history/overdueHistory')
			},
			gotoBooking() {
				this.$u.route('pages/history/bookingHistory')
			},
			gotoIntegrate() {
				this.$u.route('pages/index/integrate')
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $page-color;
	}

	.header {
		display: flex;
		flex-flow: column;
		justify-content: space-around;
		height: 350rpx;
		background-color: $base-color;
		border-radius: 0 0 40rpx 40rpx;
		color: #d5e6fd;

		.tips {
			display: flex;
			justify-content: space-between;
			color: #d5e6fd;
			margin: 0 30rpx;
			font-size: 32rpx;

			.layout {
				padding-top: 60rpx;
			}

		}

		image {
			width: 60rpx;
			height: 60rpx;
		}

		.grid-text {
			margin-top: 10rpx;
		}
	}

	.news {
		display: flex;
		margin: 0 2%;
		align-items: center;
		height: 140rpx;

		.title {
			display: flex;
			align-items: center;
			font-weight: bold;

			.type {
				font-family: georgia, serif;
				color: #0E16ED;
				font-size: 20px;
				font-weight: bold;
				letter-spacing: -2.4pt;
				word-spacing: 0.6pt;
				line-height: 0.6;
				margin-right: 30rpx;
			}

		}

		.time {
			margin-left: auto;
			color: #999999;
		}
	}

	.location {
		font-size: 40rpx;
		font-weight: bold;
		margin-left: 2%;
		// margin-top: 60rpx;
	}

	.page-body {
		margin: 20rpx 2%;
		opacity: 0.8;
		filter: alpha(opacity=80);
		/* 针对 IE8 以及更早的版本 */
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		height: 100rpx;
		margin: 0 auto;
		margin-top: -50rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		box-shadow: inset 2px 2px 8px #FFFFFF;
		position: relative;
		z-index: 999;

		.left {
			display: flex;
			align-items: center;
			margin-left: 25rpx;
		}

		.right {
			margin-right: 25rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.integrate {
		margin-top: 60rpx;
		padding: 0 3%;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		image {
			height: 300rpx;
			width: 100%;
		}
	}
</style>
